<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件嵌套</title>
    <!--    react.js的核心文件, 支持react语法-->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <!--    react-dom.js 支持react有关的DOM操作-->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <!--    jsx-->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box img{
            width: 300px;

        }
    </style>
</head>
<body>
<div id="app"></div>
</body>
</html>
<script type="text/babel">
    let app=document.getElementById('app');
    let {Component,Fragment}=React;
    //定义一个新的组件 用于嵌套进入Usersinfo组件中
    class Icon extends Component{
        render() {
            return <img src={this.props.url}/>
        }
    }
    class Info extends Component{
        render() {
            //Fragment 可以当做根标签,但是又不会被浏览器渲染
            return <Fragment>
                <h2>{this.props.users.name}</h2>
                <h2>{this.props.users.info}</h2>
                <h2>{this.props.users.sex}</h2>
            </Fragment>
        }
    }
    class Userinfo extends Component{
        render() {
            return <div className="box">
               <Icon url={this.props.users.iconUrl}/>
                <Info users={this.props.users}></Info>
                <h2>{this.props.tiem}</h2>
            </div>
        }
    }
    //定义数值
    let users={
        iconUrl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606284399454&di=3bb64a34aabf5307c261dfd83642bf9e&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_zoom%2Cw_640%2Fimages%2F20180503%2Faa0ae06edf8b4c8c9932da7d17d56180.jpeg",
        name:"胖胖",
        info:"是个大美女",
        sex:"女",
    }
    ReactDOM.render(
        <div>
            <Userinfo users={users} tiem={new Date().toLocaleTimeString()}/>
            <Userinfo users={users}/>
        </div>
        ,app)
</script>